<script setup lang="ts">
import axios from 'axios'
import { table } from 'console';
import { stat } from 'fs';
import { computed, reactive } from 'vue';
/* axios.get('http://open.douyucdn.cn/api/RoomApi/live').then(res=>{
    console.log(res.data);
    //跨域
}) */
const state: {
    douyuList: any,
    currentPage: number
} = reactive({
    douyuList: [],
    currentPage: 1,

})
axios.get('/api/RoomApi/live').then(res => {
    console.log(123, res.data.data);
    state.douyuList = res.data.data
})
//点击切换页码

// 只显10条数据
const tableList = computed(() => {
    return state.douyuList.slice((state.currentPage - 1) * 6, (state.currentPage - 1) * 6 + 6)
})

</script>
<template>
    <div class="box" >
        <header class="header">头部--斗鱼跨域</header>
        
        <ul class="content">
            <li v-for="item in tableList" :key="item.room_id">
                <img :src="item.room_src" alt="">
                <span>{{ item.room_name }}</span>
            </li>
        </ul>

        <van-pagination v-model="state.currentPage" :total-items="state.douyuList.length" :items-per-page="6" />
    </div>
</template>
<style lang="scss" scoped>
ul {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;

    li {
        display: flex;
        flex-direction: column;
        width: 48vw;
        justify-content: center;
        align-items: center;
        margin-left: 2vw;

        img {
            width: 100%;
        }
    }
}
</style>